<template>
    <div class="home-top"> <h3>人气推荐</h3>
    <div class="content">
    <van-card
    v-for="item in goodsList" :key="item.id"
    :tag="item.tag"
    :price="item.retail_price"
    :origin-price="item.origin_price" :desc="item.goods_brief"
    :title="item.name"
    :thumb="item.list_pic_url" >
    </van-card> </div>
</div>
</template>

<script setup>
const goodsList = [ {
retail_price: '299.00', name: '陶瓷碗 景德镇手工瓷碗',
goods_brief: '一级陶瓷，声音清脆、颜色艳丽、款式独一无二', list_pic_url: '/images/top1.jpg',
tag: 'TOP1' },
{
retail_price: '1900.00', origin_price: '1998.00', name: '单人沙发',
goods_brief: '安全、不会侧翻、舒适', list_pic_url: '/images/top2.jpg',
tag: 'TOP2'
}, {
retail_price: '1288.00',
origin_price: '1688.00',
name: '炖煮一体电锅',
goods_brief: '轻松炒菜、安全、便捷、好清洗',
list_pic_url: '/images/top3.jpg', tag: 'TOP3'
}, {
retail_price: '399.00', origin_price: '505.00', name: '小猫抱枕',
goods_brief: '新疆棉 舒适柔软 方便清洗、可爱',
list_pic_url: '/images/top4.jpg', tag: 'TOP4'
}, {
retail_price: '89.00',
origin_price: '99.00',
name: 'ins风抽纸盒',
goods_brief: '简单、ins风、百搭', list_pic_url: '/images/top5.jpg',
tag: 'TOP5' }
]
</script>

<style lang="less" scoped> .home-top {
h3 {
font-size: 22px;
line-height: 30px;  text-align: center; margin: 0.5rem 0;
}
.content {
--van-tag-primary-color: #FF8000; --van-card-font-size: 16px;
--van-card-background: #f9f9f9;
background: var(--van-card-background);
:deep(.van-card) {
margin-top: 0;
.van-card   title {
padding: 10px 0 5px; }
.van-card   price-currency {
font-size: var(--van-card-font-size); }
}
&::after {
content: '';
display: block; height: 3rem;
}
} }
</style>